
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri ="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>购物商城首页</title>
    <style type="text/css">
        .d1 table tr td{
            font-size: 13px;
        }
        .d1 table tr td a{
            text-decoration: none;
        }
        *{
            margin: 0;
            padding: 0;
        }


        /*边框圆滑(四角)*/
        .smooth{
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px
        }

        .img:hover{
            border:3px solid lightskyblue;
        }

        .table_p a{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }

        /*边框圆滑(上两角)*/
        .smooth2{
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            -o-border-radius: 5px
        }

        * {
            margin: 0 auto;
            padding: 0;
        }
        #ul1 li{
            list-style: none;
            float: left;
            margin-left: 26px;
            color: #FFFFFF;
            font-size: 13px;
        }
        #ul1 li a{
            color: #ffffff;
            text-decoration: none;
        }
        #ul1 li a:hover{
            color: #FFFF00;
        }

    </style>
</head>
<body>

<%--  <iframe src="header.jsp" style="width: 100%;height: 200px;border: 0px"></iframe>--%>
<div>
    <%--第一部分--%>
    <div style="width: 100%;height: 34px;background-color: #efefef">
        <div style="text-align:right;font-size: 14px;line-height: 34px;width: 1000px;padding-right: 20px">
            官方网站<a href="https://www.gec.com">https://www.gec.com</a>
            [<a href="http://localhost:8080/${pageContext.request.contextPath}/login.jsp">${user.name}</a>]
            [<a href="http://localhost:8080/${pageContext.request.contextPath}/informationListServlet">我的购物车</a>]
            [<a href="http://localhost:8080/${pageContext.request.contextPath}/orderForm.jsp">我的订单</a>]
            <a href="#">设置为首页</a>
            |<a href="#">加入收藏</a>
        </div>
    </div>

    <%--第二部分--%>
    <div>
        <div style="width: 1000px;margin-top: 20px">
            <table>
                <tr>
                    <td><img src="img/article/logo.gif"></td>
                    <td><img src="img/banner.gif"></td>
                    <td><a href="#" style="border:1px solid #CCCCCC;text-decoration: none;color: #CCCCCC;font-size: 12px">&nbsp;&nbsp;关于我们&nbsp;&nbsp;</a><br><br><a href="#" style="border:1px solid #CCCCCC;text-decoration: none;color: #CCCCCC;font-size: 12px">&nbsp;&nbsp;联系方式&nbsp;&nbsp;</a></td>
                </tr>
            </table>
        </div>
    </div>

    <%--第三部分--%>
    <div style="width: 100%;height: 30px;background-color: #CC3333;margin-top: 20px">
        <div style="width: 1000px;line-height: 30px;text-align: center">
            <ul id="ul1">
                <li><a href="index.do"target="_blank">首页</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0001">护肤</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0002">彩妆</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0003">香氛</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0004">身体护理</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0005">礼盒套装</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0006">母婴专区</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0007">男士专区</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0008">粉底</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0009">粉饼</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0010">睫毛膏</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0011">唇彩</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0012">腮红</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0013">食品保健</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0014">瘦身类</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0015">美容类</a></li>
            </ul>
        </div>
    </div>
</div>
<div style="margin-left: 200px;width:263px;border: 1px solid #F6A65B; background: #F6A65B;position: absolute" align="center" class="d1">
    <table bgcolor="#F6A65B" width="264px" height="550px" style="margin: 0px">
        <tr>
            <td style="font-size: 20px;color: #6E3D12">物品分类</td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0001">&nbsp;护肤</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0002">&nbsp;彩妆</a><span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0003">&nbsp;香氛</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0004">&nbsp;身体护理</a> <span style="margin-left: 174px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0005">&nbsp;礼盒套装</a> <span style="margin-left: 174px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0006">&nbsp;母婴专区</a> <span style="margin-left: 174px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0007">&nbsp;男士专区</a> <span style="margin-left: 174px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0008">&nbsp;粉底</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0009">&nbsp;粉饼</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0010">&nbsp;睫毛膏</a> <span style="margin-left: 187px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0011">&nbsp;唇彩</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0012">&nbsp;腮红</a> <span style="margin-left: 200px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0013">&nbsp;食品保健</a> <span style="margin-left: 174px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0014">&nbsp;瘦身类</a> <span style="margin-left: 187px;color: #F5D79C"> ></span></td>
        </tr>
        <tr>
            <td bgcolor="#FFFFFF"><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0015">&nbsp;美容类</a> <span style="margin-left: 187px;color: #F5D79C"> ></span></td>
        </tr>
    </table>
</div>
<div style="margin-left: 470px;width: 900px;">
        <span style="margin-left: 100px">物品类型：
            <select name="物品类型" style="width: 80px">
                <option>护肤</option>
                <option>彩妆</option>
                <option>香氛</option>
                <option>身体护理</option>
                <option>礼盒套装</option>
                <option>母婴专区</option>
                <option>男士专区</option>
                <option>粉底</option>
                <option>粉饼</option>
                <option>睫毛膏</option>
                <option>唇彩</option>
                <option>腮红</option>
                <option>食品保健</option>
                <option>瘦身类</option>
                <option>美容类</option>
            </select>
            <input type="text" size="50">
            <button style="width: 40px;height: 25px">搜索</button>
        </span>
    <div class="smooth" style="border: 2px solid #E0E0E0;width:850px;height: 900px;">
        <div class="smooth" style="background: #F7B64B;height: 25px;width: 846px;border: 1px solid #E78F08;">
            <p class="smooth" style="background: #FFFFFF;width: 65px;border: 2px solid #FFFFFF;border-width: 2px 2px 2px 2px;line-height: 25px;color: #EB8F00;font-weight: bold;margin-left: 10px;margin-top: 3px" align="center">护肤</p>
        </div>
        <div style="overflow-x: auto;overflow-y: auto;width:850px;height: 865px;">
            <table style="border-spacing: 10px 10px;" width="650px">
                <tr>
                    <c:forEach var="li" items="${list}" varStatus="status">

                    <td style="border: 2px solid #F2F2F2" align="center">
                        <p class="img"><a href="javascript:void(0)" onclick="submitID(${li.id})"><img src="img/article/${li.image}" width="180px"></a></p><br>
                        <p align="center">
                            <span style="color: #BFB7B7">原价:${li.price}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #E52829">特价:${li.discount}</span><br>
                            <span id="articleID" style="display: none">${li.id}</span>
                        </p>
                        <p class="table_p img" style="width: 150px;" ><a href="javascript:void(0)" onclick="submitID(${li.id})">${li.title}</a></p>
                    </td>
                    <c:if test="${status.count%4==0}">
                <tr>
                    </c:if>
                    </c:forEach>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>

<%--引用jq包--%>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
<script>


    //提交数据到详情页面
    //函数
    function submitID(id)
    {
        //要完成页面跳转
       location.href="http://localhost:8080/${pageContext.request.contextPath}/articleInfo.do?articleID="+id+"";

    }

</script>


</html>
